<!-- 图标库选择组件 -->
<template>
  <div class="iconLab">
    <el-input v-model="active" clearable placeholder="图标类名" style="width: 300px;" @clear="doClear">
      <template #append>
        <el-popover v-model:visible="show" :width="600" :teleported="false" trigger="click">
          <template #reference>
            <i v-if="active" :class="'icon zcytIcon zcyt-' + active" style="cursor: pointer;"></i>
            <el-button v-else icon="ArrowRight" link></el-button>
          </template>
          <div class="icon-box">
            <div class="icon-item" v-for="(item, index) in dataList" :key="index" @click="doChooseIcon(item)">
              <i :class="'icon zcytIcon zcyt-' + item" class="iconFont"></i>
            </div>
          </div>
        </el-popover>
        <div class="choose-btn"></div>
      </template>
    </el-input>
  </div>
</template>

<script setup>
  import { reactive, toRefs, watch } from 'vue'

  // 定义父组件传入的值
  const props = defineProps({
    modelValue: String
  })
  // 定义传值给父组件数据方法
  const emits = defineEmits(['update:modelValue'])

  const currentData = reactive({
    show: false,
    active: '',
    dataList: [
      'kanban',
      'menu',
      'juese',
      'juese1',
      'user',
      'user1',
      'weibiaoti1',
      'quanxian2',
      'pingtai',
      'quanxianshezhi',
      'quanxian1',
      'quanxian',
      'fapiaoguanli',
      'jingxiaoshangguanli1',
      'gongyingshangguanli1',
      'gongyingshangguanli-01',
      'lunbotu',
      'dingdanguanli',
      'xitongtongzhiguanli',
      'changshangguanli1',
      'changshangguanli',
      'jingxiaoshangzhengshu',
      'shangpinguanli',
      'jingxiaoshangguanli',
      'fuwubao',
      'xieyiguanli',
      'qianbao',
      'caiwuguanli',
      'gongyingshangguanli',
      'jingxiaoshang4',
      'jingxiaoshang3',
      'tongzhiguanli1',
      'tuiguang',
      'tongzhiguanli',
      'xing1',
      'xing',
      'peizhiguanli',
      'dayin1',
      'dayin',
      'unie6e1',
      'unie6af',
      'paperPlane',
      'paperPlane-fill',
      'shareout',
      'fenxiang',
      'qichefuwu',
      'pingtai1',
      'pingtai02',
      'pingtai04',
      'pingtai2',
    ]
  })
  let {show, active, dataList} = toRefs(currentData)

  // 设置初始值
  currentData.active = props.modelValue
  watch(() => props.modelValue, (newVal) => {
    currentData.active = newVal
  }, {
    immediate: true // 立即监听
  })

  function doChooseIcon(e) {
    currentData.active = e
    emits('update:modelValue', e)
    currentData.show = false
  }

  function doClear() {
    emits('update:modelValue', '')
  }
</script>

<style lang="less" scoped>
.iconLab {
  :deep(.el-popper){
    max-height: 400px;
    overflow: hidden auto;
    .icon-box{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .icon-item{
        width: 40px;
        height: 40px;
        margin: 0 10px 8px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: #DCDFE6 solid 1px;
        border-radius: 5px;
        cursor: pointer;
        .iconFont{
          font-size: 20px;
        }
      }
      .icon-item:hover{
        border: #409EFF solid 1px;
        .iconFont{
          color: #409EFF;
        }
      }
    }
  }
  
}
</style>